<template>
	 <el-row class="warp">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="setCheckEnable">商品审核开关</el-button>
					<el-button type="primary" @click="checkGoods(1)">审核通过</el-button>
					<el-button type="primary" @click="checkGoods(2)">审核不通过</el-button>
				</el-form-item>
				
				<el-form-item>
					<el-select v-model="filters.type" clearable placeholder="商城专区">
						<el-option v-for="item,index in mallType" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.roleId" clearable placeholder="所属店铺">
						<el-option v-for="item,index in shopList" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.openDistribution" clearable placeholder="分销提成">
						<el-option v-for="item,index in goodsBonus" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.status" clearable placeholder="商品状态">
						<el-option v-for="item,index in goodsStatus" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.brandId" clearable placeholder="商品品牌">
						<el-option v-for="item,index in brandList" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="输入商品ID/名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click.native="$router.push('/goods/add')">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="goods" ref="singleTable" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
		
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="id" label="商品ID" align="center" min-width="120" fixed>
			</el-table-column>
			<el-table-column prop="categoryName" label="商品分类" align="center" min-width="200">
			</el-table-column>
			<el-table-column label="商品名称" align="center" min-width="250">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top">
						<p style="width: 150px;line-height: 1.5;">{{ scope.row.name }}</p>
						<div slot="reference" class="name-wrapper">
							<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.name }}</p>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<!--<el-table-column label="商品图片" align="center" min-width="160">
				<template scope="scope">
					<img :src="scope.row.pic" style="width:50px;height:50px;">
				</template>
			</el-table-column>-->
			<el-table-column prop="price" label="商品价格" align="center" min-width="100">
			</el-table-column>
			<el-table-column prop="brandName" label="品牌" align="center" min-width="100">
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center" min-width="150">
			 <template slot-scope="scope">
                <el-tag type="warning" v-if="scope.row.status == 5">审核中</el-tag>
                <el-tag type="gray" v-if="scope.row.status == 1">销售中</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">审核未通过</el-tag>
                <el-tag type="primary" v-if="scope.row.status == 3">已下架</el-tag>
                <el-tag type="primary" v-if="scope.row.status == 4">已删除</el-tag>
            </template>
			</el-table-column>
			<el-table-column prop="type" label="商城专区" align="center" min-width="100">
				<template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.type == 1">鸿福商城</el-tag>
                <el-tag type="primary" v-if="scope.row.type == 2">积分商城</el-tag>
                <el-tag type="gray" v-if="scope.row.type == 3">旅游专区</el-tag>
                <el-tag type="warning" v-if="scope.row.type == 4">返利商城</el-tag>
            </template>
			</el-table-column>
			<el-table-column label="是否特价" align="center" min-width="100">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.isSpecialPrice == 1">是</el-tag>
					<el-tag type="danger" v-if="scope.row.isSpecialPrice == 0">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="是否分销" align="center" min-width="100">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.openDistribution == 1">是</el-tag>
					<el-tag type="danger" v-if="scope.row.openDistribution == 2">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="inventory" label="库存总量" align="center" min-width="100">
			</el-table-column>
			<el-table-column prop="remainInventory" label="剩余库存量" align="center" min-width="120">
			</el-table-column>
			<el-table-column prop="sysName" label="所属店铺" align="center" min-width="100">
			</el-table-column>
			<el-table-column prop="soldCount" label="总销量" align="center" min-width="100">
			</el-table-column>
			<el-table-column prop="createTime" label="发布时间" :formatter="formatDateTime" align="center" min-width="170">
			</el-table-column>
			<el-table-column label="操作" min-width="320" align="center" fixed="right">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="small" @click="setGoodsStatus(scope.row.id,1)"   v-if="scope.row.status ==3"  >上架</el-button>
					<el-button size="small" @click="reasonStatus(scope.row)" v-if="scope.row.status == 2 || scope.row.status == 3">查看原因</el-button>
					<el-button v-if="!scope.row.status == 2 || !scope.row.status == 3" size="small" @click="setGoodsStatus(scope.row.id,2)" >下架</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
  
		<el-col :span="24" class="toolbar">
			<el-pagination
	          class="top"
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="currentPage"
	          :page-sizes="[10, 15, 20, 30]"
	          :page-size="pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total='total'
	          style="float:right;">
	        </el-pagination>
		</el-col>
      
      
      <el-dialog title="商品审核开关" :visible.sync="withFormVisible" :close-on-click-modal="false" size="tiny">
        <el-form :model="withForm" label-width="100px" :rules="withrule" ref="withForm" style="">
          <!-- 输入框-->
          <div style="text-align:center">
           <label>开关状态：</label>
             <el-radio-group v-model="withForm.examine">
               <el-radio :label="0">开</el-radio>
               <el-radio :label="1">关</el-radio>
             </el-radio-group>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="withFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="setCheckEnable2" :loading="withLoading">提交</el-button>
        </div>
      </el-dialog>
      
      
       <el-dialog title="查看原因" :visible.sync="reasonVisible" :close-on-click-modal="false" size="tiny">
	       <p>状态：<el-tag type="warnning">{{this.statu}}</el-tag></p>
	       <el-input v-if="this.statu == '已下架'" type="text" v-model="closeReason" disabled="disabled"></el-input>
	       <el-input v-if="this.statu == '审核未通过'" type="text" v-model="rejectReason" disabled="disabled"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="reasonVisible = false">取消</el-button>
         <el-button size="small" @click="setGoodsStatus(this.iid,8)">重新上架</el-button>
        </div>
      </el-dialog>
  
 </el-row>
</template>

<script>
import util from '../../common/js/util'
import { Loading } from 'element-ui';
import { getSysConfig,deleteGoods, getGoodsList, checkGoods, openGoods, closeGoods, viewGoodsRejectedReason, enableCheckGoods, getRoleList, brandList,enableCheckGoods2, getShopList} from '@/api/api';

export default {
	data() {
		return {
			iid: '',//查看原因id
			closeReason: '',
			rejectReason: '',
			statu: '',
			filters: {
				date: '',
				keyword: '',
				type: '',
				roleId: '',
				openDistribution: '',
				status: '',
				brandId: '',
			},
			start: '',
			end: '',
			// 商品列表
			goods: [],
			withrule: {
        
        },
        	reasonrule: {
        
        },
			withFormVisible: false,//提现界面是否显示
			withLoading: false,
			reasonVisible:false,
			//分页
			total: 0,
			page: 1,
			pageSize:10,
			currentPage:1,
			listLoading: false,
			sels: [],//列表选中列
			withForm: {
             examine: ''
        },
            reasonForm:{
            	
            	status:''
            },
        
			mallType: [
				{ id: 1, name: "鸿福商城" },
				{ id: 2, name: "积分商城" },
				{ id: 3, name: "旅游专区" },
				{ id: 4, name: "返利商城" },
			],
			goodsStatus: [
				{ id: 3, name: "已下架" },
				{ id: 1, name: "销售中" },
				{ id: 5, name: "审核中" },
				{ id: 2, name: "审核未通过" },
			],
			goodsBonus: [
				{ id: 1, name: "开启" },
				{ id: 2, name: "关闭" },
			],

			shopList: [],
			brandList: [],
			goodsCheckEnable:0,

		}
	},
	methods: {
		getTime() { // 时间处理
			let starttime,endtime = ''
			let time = this.filters.date;
			if(!time[0] == '') {
				starttime = this.moment(time[0]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');
			}
			if(!time[1] == '') {
				endtime = this.moment(time[1]).utc().format('YYYY-MM-DD[T]HH:mm:ss[Z]');
			}
			if(starttime == "Invalid date"){
				starttime="";
			};
			if(endtime == "Invalid date"){
				endtime="";
			};
			this.start = starttime
			this.end = endtime
		},
		formatDateTime: function(row, column) {
			var date = row[column.property];
			if(date == undefined) {
				return "";
			}
			return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
		},
		// 分页详情
		handleSizeChange(val) {
		        this.pageSize = val;
		        this.search();
		    },
		handleCurrentChange(val) {
				this.currentPage = val;
				this.search();
		},
		//获取商品列表
		getGoods() {
			let para = {
				pageIndex: this.currentPage,
				pageSize: this.pageSize
			};
			
			this.listLoading = true;
			getGoodsList(para).then((res) => {
				this.goods = res.data.data;
				this.total = res.data.totalCount;
				this.pageSize = res.data.pageSize
				this.listLoading = false;
			});
		},
		setCurrent(row) {
			this.$refs.singleTable.setCurrentRow(row);
		},

		search() {
		    this.getTime();
			let para = {
			    pageIndex: this.currentPage,
				pageSize: this.pageSize
			}
			if(!this.start == '') {
			    para.startTime = this.moment(this.start).format();
			}
			if(!this.end == '') {
				para.endTime = this.moment(this.end).format();
			}
			if(!this.filters.type == '') {
				para.type = this.filters.type
			}
			if(!this.filters.roleId == '') {
				para.roleId = this.filters.roleId
			}
			if(!this.filters.openDistribution == '') {
				para.openDistribution = this.filters.openDistribution
			}
			if(!this.filters.status == '') {
				para.status = this.filters.status
			}
			if(!this.filters.brandId == '') {
				para.brandId = this.filters.brandId
			}
			if(!this.filters.keyword.replace(/\s/g, "") == '') {
				para.keyword = this.filters.keyword
			}
			getGoodsList(para).then((res) => {
				this.goods = res.data.data;
			    this.total = res.data.totalCount;
			    this.pageSize = res.data.pageSize
				this.listLoading = false;
			});
		},
		getGoodsShop() {
			let para = {};
			getShopList(para).then((res) => {
				this.shopList = res.data;
			
			});
		},
		getGoodsBrand() {
			let para = {};
			para.pageIndex = 1;
			para.pageSize = 10;
			brandList(para).then((res) => {
				this.brandList = res.data.data;
				//NProgress.done();
			});
		},
		handleEdit: function(index, row) {
			this.$router.push({ path: "/goods/edit", query: { id: row.id } });
		},
		//删除
		handleDel: function(index, row) {
			this.$confirm('确认删除该记录吗?', '提示', {
				type: 'warning'
			}).then(() => {
				this.listLoading = true;
				//NProgress.start();
				let para = { id: row.id };
				deleteGoods(para).then((res) => {
					this.listLoading = false;
					//NProgress.done();
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.getGoods();
				});
			}).catch(() => {

			});
		},
		checkGoods: function(type) {
			let para = {};
			para.type = type;
			var ids = this.sels.map(item => item.id);
			if (ids.length == 0) {
				this.$message({
					message: '请先选择商品',
					type: 'error'
				});
				return;
			}
			para.ids = ids;
			if (type == 2) {
				this.$prompt('请输入审核不通过原因', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({ value }) => {
					para.reason = value;
					req(this);
				})
			} else {
				this.$confirm('确认审核通过?', '提示', {
					type: 'warning'
				}).then(() => {
					req(this, para);
				});



			}


			var req = function(t) {
				t.sels.map((item,i) => {
					if(item.status == 1) {
						t.$message({
							message: '销售中状态不能审核',
							type: 'error'
						});
					} else {
						t.listLoading = true;
						checkGoods(para).then((res) => {
							t.listLoading = false;
							t.$message({
								message: '操作成功',
								type: 'success'
							});
							t.getGoods();
						});
					}
				})
				
			}
		},

		selsChange: function(sels) {
			this.sels = sels;
		},
		setCheckEnable() {
		    this.withFormVisible=true;
		    var para = { };
			enableCheckGoods(para).then((res) => {
			    this.withForm.examine=res.data
			});
			
		},
		
		setCheckEnable2() {
		    var para = { };
			enableCheckGoods2(para).then((res) => {
		
				this.$message({
					message: res.data == 1?"关闭审核成功":"开启审核成功",
					type: 'success'
				});
			    this.withForm.examine=res.data
			    this.withFormVisible=false;
			});
			
		},
		
		reasonStatus(row) {
			this.iid = row.id
		    this.reasonVisible=true;
		    if(row.status == 1) {
		    	this.statu = '销售中'
		    }
			if(row.status == 2) {
				this.statu = '审核未通过'
				this.rejectReason = row.rejectReason
			}
			if(row.status == 3) {
				this.statu = '已下架'
				this.closeReason = row.closeReason
			}
			if(row.status == 4) {
				this.statu = '已经删除'
			}
			if(row.status == 5) {
				this.statu = '审核中'
			}
		},
		
		setGoodsStatus(id, status) {
			let para = {id:id}
		if (status == 1) {
				this.listLoading = true;
			openGoods(para).then((res) => {
				this.listLoading = false;
				this.reasonVisible=false;
				this.$message({
					message: '操作成功',
					type: 'success'
				});
				this.getGoods();
			});
		} else if(status == 8) {
				this.listLoading = true;
			openGoods({id: this.iid}).then((res) => {
				this.listLoading = false;
				this.reasonVisible=false;
				this.$message({
					message: '操作成功',
					type: 'success'
				});
				this.getGoods();
		})} else {
			this.$prompt('请输入下架原因', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				this.listLoading = true;
				para.reason = value;
				closeGoods(para).then((res) => {
					this.listLoading = false;
					this.$message({
						message: '操作成功',
						type: 'success'
					});
					this.getGoods();
				});
			})





		}

	},
	getGoodsCheckConfig(){
		var param = {field:'config_enable_check_goods'};
		getSysConfig(param).then(res=>{
			this.goodsCheckEnable = res.data.value;
		})
	},
	},
	
	mounted() {
		this.getGoods();
		this.getGoodsShop();
		this.getGoodsBrand();
		this.getGoodsCheckConfig();
	}
}

</script>

<style scoped>
.with {
  width:40%;height:28%;left:33%;top:30%;
margin-left:-200px;margin-top:-100px;
  }
</style>
